<template>
  <div id="personalCredit">
    <c-title :hide="false" :text="'个人额度'"></c-title>
    <div class="topbanner">
      <span class="txt">剩余额度</span>
      <span class="price">{{quota}}</span>
    </div>
    <div class="list">
      <van-tabs v-model="active" title-active-color="#ff851c" color="#ff851c">
        <van-tab title="额度明细">
          <div class="lis" v-for="(item,index) in list" :key="index">
            <div class="line">
              <span class="txtx">{{item.remark}}</span>
              <span :class="item.quota_change_type == 1?'zclass':'fclass'">{{item.quota_change_type == 1?'+':'-'}}{{item.quota}}</span>
            </div>
            <div class="line">
              <span class="time">{{item.created_at}}</span>
              <span></span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      list: [],
      info:[],
      quota:0,
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      let urls = "plugin.activity-ranking.frontend.quota.personal-quota";
      $http
        .get(
          urls,
          {
            page: this.page,
          },
          "生成中"
        )
        .then(response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.total_page = response.data.list.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.list = response.data.list.data;
            this.quota =response.data.quota;
          } else {
            this.posterShow = false;
            this.$dialog.alert({
              message: response.msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      let urls = "plugin.activity-ranking.frontend.quota.personal-quota";
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            urls,
            {
              page:this.page
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                let myData = response.data.list.data;
                this.list = this.list.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
              }
            },
            response => {
              Toast(response.msg);
            }
          )
          .catch(err => {
            console.error(err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#personalCredit {
  padding: 0.63rem;
}

.list {
  width: 100%;
  background: #fff;
  padding: 0 0.94rem;
  margin-top: 0.63rem;

  .lis {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ededed;
    padding: 0.94rem 0;

    .line {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .txtx {
        font-size: 0.81rem;
        margin-bottom: 0.4rem;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }

      .time {
        font-size: 0.75rem;
        color: #7a7a7a;
      }

      .zclass {
        color: #f15353;
        flex-shrink: 0;
      }

      .fclass {
        color: #0a8d2c;
        flex-shrink: 0;
      }
    }
  }
}

.topbanner {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/personalCredit.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 22.19rem;
  height: 7.5rem;
  background-color: #ff851c;
  border-radius: 0.31rem;
  display: flex;
  flex-direction: column;
  padding: 1.31rem 0 0 1.4rem;
  text-align: left;

  .txt {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.81rem;
    color: #fff;
    margin-bottom: 1rem;
  }

  .price {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.56rem;
    color: #fff;
  }
}
</style>